<template>
	<view class="u-wrap home_bg">
		<view class="head_main">
			<view style="padding-top:95rpx;padding-left:20rpx;padding-bottom:35rpx;" @click="toback">
				<u-icon name="arrow-left" label="邻里商城" labelColor="#333" space="6">
				</u-icon>
			</view>
		</view>
		<view class="u-search-box">
			<view class="u-search-inner">
				<u-icon name="search" color="#909399" :size="28"></u-icon>
				<text class="u-search-text">搜索您想要的物品</text>
			</view>
		</view>

		<view style="padding: 0rpx 20rpx;">
			<u-swiper border-radius="50" height="320rpx" img-mode="heightfill" @click="intoBanner" indicator indicatorMode="dot" :list="bannerList" keyName="image">
			</u-swiper>
		</view>

		<view style="margin: 20rpx 0;">
			<view style="background-color: #e5f2f3;padding:10rpx 0;">
				<image class="notice_img va_m" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20221012/7131b2f4050dc1d4c0e28a767474135d.png"></image>
				<image class="va_m" mode="widthFix" style="width:15rpx;" src="https://resourse.cnlhjt.com/upload/20221012/a89b09b6f25b7f22bfa128ed092471d0.png"></image>
				<view style="width:72%;display:inline-block;vertical-align:middle;">
					<u-notice-bar icon=" " :text="text" duration="3000" step color="#00828a" bgColor="#e5f2f3"
						style="margin-left:25rpx;" mode="closable">
					</u-notice-bar>
				</view>
			</view>
		</view>
		<view style="margin: 10rpx 20rpx 20rpx 20rpx;">
			<u-grid col="5">
				<u-grid-item v-for="(item,index) in navList" :key="index" v-if="index<9" @click="gotoNavList(item)">
					<u-icon width="120rpx" height="120rpx" :name="item.icon">
					</u-icon>
					<view class="grid-v" style="font-size: 28rpx;color:#555;">
						{{item.name}}
					</view>
				</u-grid-item>
				<u-grid-item @click="tonavmore">
					<u-icon width="120rpx" height="120rpx" name="https://resourse.cnlhjt.com/upload/20221205/6389869402b9c71c2361a096b1c449b3.png" >
					</u-icon>
					<view class="grid-v" style="font-size: 28rpx;color:#555;">
						更多
					</view>
				</u-grid-item>
			</u-grid>
		</view>
		<view style="padding: 20rpx 20rpx;">
			<view class="u-padding-bottom-40">
				<image style="height:38rpx;" mode="heightFix" src="https://resourse.cnlhjt.com/upload/20221012/60d70fc80d900ef7a3c2b64e42c8df5d.png"></image>
			</view>
			<image style="width:100%;" mode="widthFix" src="https://resourse.cnlhjt.com/upload/20221012/bff037fdc8dff3b75d17c348b1a949dd.png"></image>
		</view>
		
		<view style="padding:0 20rpx;">
			<view style="border-radius: 20rpx;background-color: #fff;">
				<view class="u-flex u-row-between head_bg">
					<view>
						<image class="va_m" style="height:40rpx;" mode="heightFix" src="https://resourse.cnlhjt.com/upload/20221013/06b037f8b44d48f165d3c4c2eab784be.png"></image>
						<image class="va_m" style="height:32rpx;" mode="heightFix" src="https://resourse.cnlhjt.com/upload/20221013/22cb5ba936636e52d4a686705ef8005c.png"></image>
					</view>
					<view @click="todiscount">
						<text style="font-size: 26rpx;color:#666;">更多折扣商品</text>
						<view class="dis_inl_blo">
							<u-icon name="arrow-right" size="15" color="#666"></u-icon>
						</view>
					</view>
				</view>
				<view style="padding:0 20rpx 20rpx" class="u-flex u-row-between">
					<view class="discount_list" v-for="(item,index) in discount" :key="index">
						<image mode="heightFix" :src="item.image"></image>
						<view class="discount_con">
							<view class="u-flex u-row-between">
								<text style="color:red;font-size: 22rpx;">疯抢价</text>
								<text><text style="font-size: 16rpx;">￥</text>{{item.price}}</text>
							</view>
							<view style="color:#666;text-decoration:line-through;text-align: left;">
								<text style="font-size: 16rpx;">￥</text>
								<text>{{item.oldprice}}</text>
							</view>
						</view>
					</view>
				</view>
			</view>
			
		</view>
		<view style="padding: 20rpx 20rpx;">
			<view>
				<image style="height:38rpx;" mode="heightFix" src="https://resourse.cnlhjt.com/upload/20221013/74726c96db7029a5ac7ff7d38506c949.png"></image>
			</view>
			<view style="padding:10rpx 0 0;">
				<view class="shop_list" v-for="(item,index) in recommendGoodsList" :key="index" @click="goodDetail(item.id, item.sid)">
					<image mode="heightFix" :src="item.icon"></image>
					<view class="shop_con">
						<view class="overflow">
							<text class="type_con">自营</text>
							<text>{{item.name}}</text>
						</view>
						<view class="overflow" style="font-size: 24rpx;color:#666;padding:15rpx 0 25rpx;">{{item.marks}}</view>
						<view class="u-flex u-row-between">
							<text style="color:#666;text-decoration:line-through;">￥{{item.oriPrice}}</text>
							<text style="font-size: 32rpx;color:red;font-weight: bold;"><text style="font-size: 22rpx;">￥</text>{{item.price}}</text>
						</view>
					</view>
				</view>
				<u-loadmore :status="status" :nomore-text="nomoreText" />
			</view>
		</view>
		<!-- <view class="u-padding-20" style="font-size: 24rpx;color:#666;text-align: center;padding-bottom:20rpx;">我是有底线的~</view> -->
		<!-- <view class="user-list-cell" style="padding: 0rpx 10rpx;">
			<view class="item">
				<view class="icon">
					<u-icon width="340rpx" height="215rpx" :name="navList[8].image" @click="gotoNavList(navList[8])">
					</u-icon>
				</view>
			</view>
			<view class="item">
				<view class="icon">
					<u-icon width="340rpx" height="215rpx" :name="navList[9].image" @click="gotoNavList(navList[9])">
					</u-icon>
				</view>
			</view>
		</view> -->
	</view>

</template>

<script>
	import {
		getShopCate,recommendGoods
	} from "@/service/shopservice.js";
	import {
		getBanner
	} from "@/service/configService.js";
	import {
		getNotice
	} from "@/service/noticeService.js";
	export default {
		data() {
			return {
				text: [],
				bannerList: [],
				navList: [],
				recommendGoodsList: [],
				limit: 20,
				page: 1,
				nomoreText:'我是有底线的~',
				discount:[
					{
						id:1,
						image:'https://resourse.cnlhjt.com/upload/20221013/6082f575e9fea5427a3cd53c15666b8f.png',
						oldprice:'3.5',
						price:'1.5'
					},
					{
						id:2,
						image:'https://resourse.cnlhjt.com/upload/20221013/6082f575e9fea5427a3cd53c15666b8f.png',
						oldprice:'3.5',
						price:'1.5'
					},
					{
						id:3,
						image:'https://resourse.cnlhjt.com/upload/20221013/6082f575e9fea5427a3cd53c15666b8f.png',
						oldprice:'3.5',
						price:'1.5'
					},
					{
						id:4,
						image:'https://resourse.cnlhjt.com/upload/20221013/6082f575e9fea5427a3cd53c15666b8f.png',
						oldprice:'3.5',
						price:'1.5'
					}
				],
				
			}
		},
		mounted() {
			getShopCate().then(this.getShopCate);
			getNotice({type: 1}).then(this.getNotice);
			getBanner({
				type: 2
			}).then(this.getHomeNav);
			
			recommendGoods({
				page: this.page,
				limit: this.limit
			}).then(this.getGoodsList);
		},
		onReachBottom() {
			// console.log(123123);
			if (this.status == 'nomore') return;
			this.status = 'loading';
			this.page = ++this.page;
			recommendGoods({
				page: this.page,
				limit: this.limit
			}).then(this.getGoodsList);
		},
		methods: {
			getGoodsList(e) {
				if (e.code == 200) {
					let list = e.result;
					list.forEach(item => {
						this.recommendGoodsList.push(item)
					})
					if (list.length < this.limit) this.status = 'nomore';
				} else {
					this.status = 'nomore';
				}
			},
			goodDetail(id, sid) {
				this.$u.route({
					url: '/pagesShop/nav/good-detail',
					params: {
						gid: id,
						sid: sid
					}
				})
			},
			getHomeNav(e) {
				if (e.code == 200) {
					this.bannerList = e.result;
				}
			},
			getNotice(e) {
				if (e.code == 200) {
					this.text = e.result;
				}
			},
			getShopCate(e) {
				if (e.code == 200) {
					this.navList = e.result;
				}
			},
			gotoNavList(item) {
				this.$u.route({
					url: "/pagesShop/nav/index",
					params: {
						nid: item.id,
						title: item.name,
						icon: item.icon,
						cid: item.id
					}
				})
			},
			tonavmore(){
				this.$u.route({
					url: "/pagesShop/index/index",
					params: {
						cut:1
					}
				})
			},
			toback(){
				uni.navigateBack();
			},
			todiscount(){
				uni.navigateTo({
					url:'./discount'
				})
			},
			intoBanner(index) {
				let id = this.bannerList[index].id;
				this.$u.route({
					url: '/pagesHome/index/article',
					params: {
						id: id
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f8f8f8;
	}
	.home_bg{
		background-image: url('https://resourse.cnlhjt.com/upload/20221012/838bfbf1e8190823058a2d15cc1a823b.png');
		background-position: center top;
		background-size: 100% 450rpx;
		background-repeat: no-repeat;
	}
	.head_bg{
		padding:30rpx 20rpx;
		background-image: url('https://resourse.cnlhjt.com/upload/20221013/2cab9250a093f00ce76b4897dd85d816.png');
		background-position: center top;
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}
	.discount_list{
		width:23%;
		border-radius: 15rpx;
		font-size: 24rpx;
		text-align: center;
		background-color: #ebfbf5;
		image{
			height:80rpx;
			margin:15rpx auto;
		}
		.discount_con{
			padding:20rpx 10rpx;
			background-color: #fff4d4;
			border-radius: 15rpx;
		}
	}
	.discount_list:nth-child(2){
		background-color: #fae2e8;
	}
	.discount_list:nth-child(3){
		background-color: #fbf7eb;
	}
	.discount_list:nth-child(4){
		background-color: #ebebff;
	}
	.shop_list{
		display: inline-block;
		width:47%;
		margin:0 10rpx 20rpx;
		background-color: #fff;
		text-align: center;
		border-radius: 15rpx;
		overflow: hidden;
		image{
			height:200rpx;
			margin:20rpx auto;
		}
		.shop_con{
			width:100%;
			text-align: left;
			font-size: 26rpx;
			padding:0 20rpx 20rpx;
			box-sizing:border-box;
			.type_con{
				color:#fff;
				border-radius: 8rpx;
				padding:3rpx 5rpx;
				font-size: 20rpx;
				margin-right:5rpx;
				background-color: red;
			}
		}
	}
	.u-wrap {
		/* #ifdef H5 */
		margin-top: 0rpx;
		/* #endif */
		display: flex;
		flex-direction: column;
		// background-color: #FFFFFF;
		
	}

	.u-search-box {
		padding: 18rpx 30rpx;
	}

	.u-menu-wrap {
		flex: 1;
		display: flex;
		overflow: hidden;
	}

	.u-search-inner {
		background-color: rgb(234, 234, 234);
		border-radius: 100rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 16rpx;
	}

	.u-search-text {
		font-size: 26rpx;
		color: $u-tips-color;
		margin-left: 10rpx;
	}

	.notice_img {
		width: 150rpx;
		// height: 60rpx;
		/* top:25rpx;left:10rpx; */
		background-color: #e5f2f3;
		// border-right: 1rpx solid #ddd;
		padding-left:20rpx;
		padding-right:10rpx;
	}
	.iconType {
		display: flex;
		background-color: #FFFFFF;
		justify-content: space-between;
	}

	.icon {
		height: auto;
	}

	.item {
		display: flex;
		flex-direction: column;
		align-items: center;
		color: #13227a;
		font-size: 28rpx;
		border-radius: 20rpx;
	}

	.grid-v {
		width: 150rpx;
		// height: 60rpx;
		text-align: center;
		// line-height: 80rpx;
		border-radius: 10rpx;
		font-size: 30rpx;
		font-weight: 200;
		// background-color: #0F494F;
		// color: #FFFFFF;
	}
</style>
